<template>
  <!-- 4-ICOM图标 -->
  <div class="charm-app">
    <div class="charm-root">
      <div class="charm-body">
        <!--1.登录页左侧-->
        <div class="charm-body-info">
          <div class="info-logo">
            <a href="#">
              <img alt="" src="../assets/logo_AutoTp.png" />
            </a>
          </div>
          <div class="info-image">
            <img src="../assets/ad-01.png" />
          </div>
          <div class="info-message">
            <p class="message-item">
              <thy-icon class="icon thy-icon-phone thy-icon">
                <svg
                  viewBox="0 0 16 16"
                  xmlns="http://www.w3.org/2000/svg"
                  fit=""
                  height="1em"
                  width="1em"
                  preserveAspectRatio="xMidYMid meet"
                  focusable="false"
                >
                  <g id="punormal/phone" stroke-width="1" fill-rule="evenodd">
                    <path
                      d="M2.948.755l-.428.274C.515 2.268 1.313 6.648 3.997 10.577c2.606 3.815 6.326 6.24 8.322 5.21l.648-.379c.807-.482 1.233-.88 1.477-1.466.36-.865.093-1.788-.712-2.73-1.228-1.436-2.316-1.865-3.55-1.304l-.112.053a5.415 5.415 0 0 0-.375.208l-.231.143-.068-.05a3.333 3.333 0 0 1-.28-.25c-.404-.395-.909-1.024-1.445-1.809-.527-.771-.923-1.459-1.142-1.966l-.051-.125-.054-.147-.027-.084.185-.114c1.496-.94 1.688-2.128.665-4.048C6.775.832 6.18.275 5.447.089L5.275.053c-.75-.128-1.367.082-2.327.702zm2.127.48c.395.069.764.392 1.113 1.048.716 1.344.675 1.85-.136 2.397l-.303.192-.233.143c-.772.475-.261 1.74 1.019 3.65l.145.215c1.38 2.018 2.437 3.056 3.226 2.57l.413-.256.196-.112c.058-.031.112-.058.163-.081.665-.303 1.225-.081 2.143.992.538.63.676 1.104.516 1.487-.112.268-.33.488-.814.794l-.702.417c-1.199.74-4.494-1.365-6.833-4.79-2.34-3.426-3.014-7.124-1.83-7.855l.442-.284c.73-.471 1.086-.592 1.475-.526z"
                      id="pu路径"
                    ></path>
                  </g>
                </svg>
              </thy-icon>
              <span>18226998071</span>
            </p>
            <p class="message-item">
              <thy-icon class="icon thy-icon-email thy-icon">
                <svg
                  viewBox="0 0 16 16"
                  xmlns="http://www.w3.org/2000/svg"
                  fit=""
                  height="1em"
                  width="1em"
                  preserveAspectRatio="xMidYMid meet"
                  focusable="false"
                >
                  <g id="ienormal/email" stroke-width="1" fill-rule="evenodd">
                    <path
                      d="M14 2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h12zM1.199 6.352L1.2 12a.8.8 0 0 0 .7.794l.1.006h12a.8.8 0 0 0 .794-.7l.006-.1V6.38L7.999 9.014l-6.8-2.662zM14 3.2H2a.8.8 0 0 0-.794.7L1.2 4l-.001 1.11.016-.04L8 7.726l6.8-2.633V4a.8.8 0 0 0-.7-.794L14 3.2z"
                      id="ie形状结合"
                    ></path>
                  </g>
                </svg>
              </thy-icon>
              <span>1844729034@qq.com</span>
            </p>
          </div>
        </div>

        <!--2.登录页右侧-->
        <div class="charm-body-content">
          <div>
            <div class="charm-body-content-main">
              <div class="charm-form-container">
                <!-- 2.1 登录标题 -->
                <div class="form-container-header">
                  <div class="form-container-header-title">
                    <span>登录</span>
                  </div>
                  <div class="form-container-header-description">
                    通过帐号密码登录，切换为 <a href="javascript:;">手机验证码登录</a>
                  </div>
                </div>
                <!-- 2.2 登录表单 -->
                <div class="form-container-body">
                  <el-form
                    ref="ruleFormRef"
                    :rules="rules"
                    v-bind:model="loginForm"
                    class="thy-form thy-form-vertical ng-pristine ng-invalid ng-touched"
                  >
                    <el-form-item label="" prop="username">
                      <el-input v-model="loginForm.username">
                        <template #prepend>
                          <el-icon :size="12" color="red">
                            <Edit />
                          </el-icon> </template
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                      <el-input type="password" v-model="loginForm.password" show-password>
                        <template #prepend
                          ><el-icon><Male /></el-icon></template
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="captcha">
                      <el-input v-model="loginForm.captcha">
                        <template #prepend
                          ><el-icon><HelpFilled /></el-icon></template
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="">
                      <el-checkbox v-model="remember" label="记住密码" />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" style="width: 100%" @click="onSubmit"
                        >登录</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 3.copy-->
        <div class="charm-body-footer">&copy; AutoTp</div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { login } from '@/utils/api.js'
import { useRouter } from 'vue-router'
import { handleMenu } from '@/utils/menu.js'
export default {
  setup() {
    const loginForm = reactive({
      //定义变量
      username: '',
      password: '',
      captcha: '9999',
      captchaKey: '',
    })
    const remember = ref(true) // 2.记住密码
    // 3.校验规则，elm中搜索form表单校验来使用
    const rules = reactive({
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 5, message: '用户名长度为3-5个字符', trigger: 'blur' },
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur',
        },
        { min: 3, max: 5, message: '密码长度为3-5个字符', trigger: 'blur' },
      ],
      captcha: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur',
        },
        { min: 4, max: 4, message: '验证码长度必须为4位', trigger: 'blur' },
      ],
    })
    const ruleFormRef = ref()
    const router = useRouter() // 4.跳转到主页（采用编程式导航）
    const onSubmit = () => {
      ruleFormRef.value.validate((valid) => {
        //validate()方法是elementPlus的表单组件提供的。用于对整个表单的内容进行验证
        if (valid) {
          login(loginForm).then((res) => {
            if (res.code === 200) {
              localStorage.setItem('loginToken', res.data.access)
              localStorage.setItem('refresh', res.data.refresh)
              localStorage.setItem('userName', res.data.username)
              localStorage.setItem('userId', res.data.userId)
              handleMenu(router)
              ElMessage.success('登录成功')
              router.push('/')
            } else {
              ElMessage.error(res.msg)
            }
          })
        }
      })
    }

    return { ruleFormRef, rules, remember, onSubmit, loginForm } //返回数值
  },
}
</script>
<style lang="scss" scoped></style>
